

<template>
  <view class="tucode">
    <input
      class="input font_14"
      placeholder-class="grey"
      type="text"
      placeholder="输入图形验证码"
      maxlength="4"
      v-model="code"
      @input="bindinput"
    />
    <view class="cabox">
      <!-- type="2d" -->
      <canvas
        style="width: 250rpx; height: 92rpx"
        class="guiCode"
        
        @click="guiCodeTap"
        canvas-id="mycanvas"
      ></canvas>
    </view>
  </view>
</template>

<script>
import guiCode from "@/utils/guicode";
export default {
  data() {
    return {
      code: "",
    };
  },
  methods: {
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min);
    },
    /**生成一个随机色**/
    randomColor(min, max) {
      let r = this.randomNum(min, max);
      let g = this.randomNum(min, max);
      let b = this.randomNum(min, max);
      return "rgb(" + r + "," + g + "," + b + ")";
    },
    /**绘制验证码图片**/
    drawPic() {
        
      var ctx = wx.createCanvasContext("mycanvas");
      console.log(ctx)
      /**绘制背景色**/
      
      ctx.fillStyle = this.randomColor(180, 240); //颜色若太深可能导致看不清
      ctx.fillRect(0, 0, 90, 46);
      console.log(ctx.fillStyle)
      /**绘制文字**/
      var arr;
      var text = "";
      var str = "ABCEFGHJKLMNPQRSTWXY123456789";
      for (var i = 0; i < 4; i++) {
        var txt = str[this.randomNum(0, str.length)];
        ctx.fillStyle = this.randomColor(50, 160); //随机生成字体颜色
        ctx.font = this.randomNum(20, 26) + "px SimHei"; //随机生成字体大小
        var x = 5 + i * 20;
        var y = this.randomNum(20, 25);
        var deg = this.randomNum(-20, 20);
        //修改坐标原点和旋转角度
        ctx.translate(x, y);
        ctx.rotate((deg * Math.PI) / 180);
        ctx.fillText(txt, 5, 0);
        text = text + txt;
        //恢复坐标原点和旋转角度
        ctx.rotate((-deg * Math.PI) / 180);
        ctx.translate(-x, -y);
      }
      /**绘制干扰线**/
      for (var i = 0; i < 4; i++) {
        ctx.strokeStyle = this.randomColor(40, 180);
        ctx.beginPath();
        ctx.moveTo(this.randomNum(0, 90), this.randomNum(0, 28));
        ctx.lineTo(this.randomNum(0, 90), this.randomNum(0, 28));
        ctx.stroke();
      }
      /**绘制干扰点**/
      for (var i = 0; i < 20; i++) {
        ctx.fillStyle = this.randomColor(0, 255);
        ctx.beginPath();
        ctx.arc(
          this.randomNum(0, 90),
          this.randomNum(0, 28),
          1,
          0,
          2 * Math.PI
        );
        ctx.fill();
      }
      ctx.draw();

      uni.canvasToTempFilePath({
        canvasId: 'mycanvas',
        width: 125,    
        height: 46, 
        destWidth: 125,   // 设置大一点清晰度会高
        destHeight: 46,
        success: res=> {
            let tempFilePath = res.tempFilePath;
            console.log(tempFilePath)   
        },
        fail:err=>{
            console.log(err)
        }
    })
    },
    bindinput() {},
    guiCodeTap() {
      this.guiCode.refresh();
    },
    /**
     * 验证图形验证码
     */
    validateGuiCode() {
      if (!this.code) {
        wx.showToast({
          title: "请输入图形验证码",
          icon: "none",
        });
        return;
      }
      let res = this.guiCode.validate(this.code);
      if (!res) {
        wx.showToast({
          title: "图形验证码错误",
          icon: "none",
        });
      }
    },

    /**
     * 立即验证按钮监听
     */
    toValidate() {
      //验证图形验证码
      this.validateGuiCode();
    },
  },
  onReady() {
    console.log(1111);
    // this.guiCode = new guiCode({
    //   el: "#guiCodeCanvas",
    //   width: 125,
    //   height: 46,
    //   createCodeImg: "",
    //   dom: "mycanvas",
    // });
    this.drawPic()
  },
};
</script>


<style lang="scss" scoped>
.tucode {
  width: 100%;
  display: flex;
  height: 92rpx;
}
.input {
  width: 380rpx;
  height: 100%;
  padding: 0 15rpx;
  box-sizing: border-box;
  border: 1rpx solid #c8c9cc;
  border-radius: 10rpx;
  margin-right: 20rpx;
  display: block;
}

.cabox {
  width: 250rpx;
  height: 100%;
    background:rgb(232,228,236);
  border-radius: 10rpx;
}
</style>